<template>
   <div class="head">
          <el-menu
            :default-active="activeIndex"
            class="el-menu"
            mode="horizontal"
            :ellipsis="false"
            router="true"
          >
          <el-menu-item index="0">
            <img class="logo" src="img/logo.png">
          </el-menu-item>
          <div class="flex-grow" />
              <el-menu-item index="/index">
                  首页
              </el-menu-item>
              <el-menu-item index="/project">
                  产品经历
              </el-menu-item>
              <el-sub-menu index="3">
                <template #title>解决方案</template>
                 <el-sub-menu index="3-1">
                    <template #title>智慧安全</template>
                    <el-menu-item v-for="(item,index) in polices" 
                    :key="index"
                    :route="{path:item.link, query:{name:item.name}}"
                    >
                      {{item.name}}
                    </el-menu-item>
                  </el-sub-menu>
                  <el-sub-menu index="3-2">
                    <template #title>健康云大数据</template>
                    <el-menu-item v-for="(item,index) in healths" 
                    :key="index"
                    :route="{path:item.link, query:{name:item.name}}"
                    >
                      {{item.name}}
                    </el-menu-item>
                  </el-sub-menu>
                  <el-sub-menu index="3-3">
                    <template #title>智慧公共交通</template>
                    <el-menu-item v-for="(item,index) in traffices" 
                    :key="index"
                    :route="{path:item.link, query:{name:item.name}}"
                    >
                      {{item.name}}
                    </el-menu-item>
                  </el-sub-menu>

                    <el-sub-menu index="3-4">
                    <template #title>其他...</template>
                    <el-menu-item v-for="(item,index) in others" 
                    :key="index"
                    :route="{path:item.link, query:{name:item.name}}"
                    >
                      {{item.name}}
                    </el-menu-item>
                  </el-sub-menu>

              </el-sub-menu>
              <el-menu-item index="/dev">
                  研发思想
              </el-menu-item>
              <el-menu-item index="/digitization">
                  数字化发展
              </el-menu-item>
              <el-menu-item index="/about">
                  关于我
              </el-menu-item>
          </el-menu>
      </div>
      <div class="dark_ico">
            <el-button :icon="config.dark?'el-icon-sunny':'el-icon-moon'" circle type="info" @click="configDark"></el-button>
            <el-button type="primary" round @click="goInSys">进入系统</el-button>
      </div>
</template>



<script>
const handleSelect =  (key,keyPath) =>{
  console.log("--------"+key);
  console.log(keyPath);
}




export default{
    name:"officeHeader",
       data() {
        return {
          config: {
					lang: this.$TOOL.data.get('APP_LANG') || this.$CONFIG.LANG,
					dark: this.$TOOL.data.get('APP_DARK') || false
				  },
        healths:[],
				traffices:[],
				others:[],
				polices:[]
        }
       },
 
 mounted() {
    this.getPolices();
    this.getHealths();
	  this.getTraffices();
	  this.getOthers();
 },
  methods: {
    handleSelect,
    configDark(){
				this.config.dark = this.config.dark ? false : true
			},
       goInSys() {
                this.$router.replace({
					path: '/login'
				})
      },

     async getPolices(){
        const type = {type:"police"};
        const res = await this.$API.system.sysProject.list.get(type);
        this.polices = res.data;
      },
      async getHealths(){
        const type = {type:"health"};
        const res = await this.$API.system.sysProject.list.get(type);
        this.healths =res.data;
      },
      async getTraffices(){
        const type = {type:"traffic"};
        const res = await this.$API.system.sysProject.list.get(type);
        this.traffices =res.data;
      },
	  async getOthers(){
        const type = {type:"other"};
        const res = await this.$API.system.sysProject.list.get(type);
        this.others =res.data;
      }
  },

  watch:{
			'config.dark'(val){
				if(val){
					document.documentElement.classList.add("dark")
					this.$TOOL.data.set("APP_DARK", val)
				}else{
					document.documentElement.classList.remove("dark")
					this.$TOOL.data.remove("APP_DARK")
				}
			}
		},
}
</script>

<style>
/* 整体布局 */

.el-main{
  /* margin-top: 87px;*/
  padding: 0; 
}
/* .el-footer{
  height: 100px;
} */


 .head{
    margin-left: 20%;
    margin-right: 20%;
  }
  .logo{
    height: 50px;
    height: 50px;
  }
  .h_l{
    width: 100px;
    float: left;
  }
  .h_r
  {
    float: left;
    margin-left: 100px;
    width: 300px;
    height: 80px;
  }


</style>